<template>
  <div class="main">
    <div class="shell" ref="ref_shell">
      <div class="banner" ref="ref_banner">
        <div class="buttons">
          <div class="prev __hover" @click="moveTo(-1)"><SvgIcon name="czr_arrow" color="#ffffff" size="40" rotate="180"/></div>
          <div class="prev __hover" @click="moveTo(1)"><SvgIcon name="czr_arrow" color="#ffffff" size="40"/></div>
        </div>
        <div class="slider" ref="ref_slider" :style="`--itemGap: ${state.itemGap}px;`">
          <template v-for="(item, index) in state.arr">
            <div class="item __hover" :style="`--bgColor: ${$czrUtil.randomColor(1)};--itemWidth: ${state.itemWidth}px;`" ref="ref_items" @mouseenter="movePause()"  @mouseleave="moveStart()" @click="moveStart(true, true, index)">
              <div class="frame">
                <div class="box front">
                  <h1>{{item}}</h1>
                  <span>zhe shi yi duan mei shen me yong de wen zi, dan ni hai shi du le chu lai</span>
                </div>
                <div class="box left"/>
                <div class="box right"/>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, onBeforeUnmount, onMounted, reactive, ref} from "vue";
import {isValue} from "@/utils/czr-util";

const {proxy} = getCurrentInstance()
const state: any = reactive({
  arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  currentIndex: 0,  //  当前项索引
  moveTimer: null,  //  定时器
  transitionTime: 2,  //  每一次过渡的时长，秒
  itemWidth: 150,  //  每一项的宽度
  itemGap: 40,
})
const ref_slider = ref()
const ref_items = ref()
const ref_banner = ref()
const ref_shell = ref()
const moveStart = (init = false, paused = false, index = null) => {
  const m = () => {
    if (isValue(index)) {
      state.currentIndex = index
    } else {
      state.currentIndex++
      if (state.currentIndex > state.arr.length - 1) {
        state.currentIndex = 0
      }
    }
    ref_slider.value.style.transform = `translate3d(${-1 * (state.currentIndex * (state.itemWidth + state.itemGap) - ref_banner.value.clientWidth / 2 + state.itemWidth / 2)}px, 0, 0)`
    for (let i = 0; i < state.arr.length ; i++) {
      const item = ref_items.value[i];
      const frame = item.getElementsByClassName('frame')[0];
      if (i == state.currentIndex) {
        frame.style.transform = "perspective(1200px)";
      } else {
        frame.style.transform = `perspective(1200px) rotateY(${i < state.currentIndex ? 40 : -40}deg)`
      }
    }
    const boxBgColor = window.getComputedStyle(ref_items.value[state.currentIndex]).getPropertyValue('--bgColor')
    ref_shell.value.style.backgroundColor = boxBgColor
  }
  clearInterval(state.moveTimer)
  if (init) {
    m()
  }
  if (!paused) {
    state.moveTimer = setInterval(() => {
      m()
      moveStart()
    }, state.transitionTime * 1000)
  }
}
const moveTo = (offset) => {
  movePause()
  state.currentIndex += offset
  if (state.currentIndex > state.arr.length - 1) {
    state.currentIndex = 0
  } else if (state.currentIndex < 0 ) {
    state.currentIndex = state.arr.length - 1
  }
  console.log(state.currentIndex)
  moveStart(true, true, state.currentIndex)
}
const movePause = () => {
  clearInterval(state.moveTimer)
}
onMounted(() => {
  moveStart(true, false, 0)
})
onBeforeUnmount(() => {
  movePause()
})
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  .shell {
    width: 800px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: rgba(99, 99, 99, 0.8);
    overflow: hidden;
    transition: background-color .7s ease-in-out;
    .banner {
      width: 100%;
      padding: 20px 0 150px 0;
      .buttons {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 350px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 150px;
        >div {
          transition: transform 0.25s ease;
          z-index: 99999;
        }
      }
      .slider {
        position: relative;
        transition: transform 1s ease-in-out;
        background-color: transparent;
        width: max-content;
        display: flex;
        column-gap: var(--itemGap);
        .item {
          position: relative;
          width: var(--itemWidth);
          height: 300px;
          .frame {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 1s ease-in-out;
            transform-style: preserve-3d;
            transform: perspective(1200px) rotateY(20deg);

            &:after {
              content: '';
              position: absolute;
              bottom: -16%;
              width: 100%;
              height: 60px;
              background-color: #eFFFFF1c;
              box-shadow: 0px 0px 15px 5px #efffff1c;
              transform: rotateX(90deg) translate3d(0px, -20px, 0px);
            }
            .box {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              position: absolute;
              width: 100%;
              height: 100%;
              border: 4px solid #FFFFFF;
              perspective: 1000px;
              transform-style: preserve-3d;
              box-shadow: 0 0 50px #FFFFFF;
              background-color: var(--bgColor);
              >h1 {
                color: #FFFFFF;
                transform: translateZ(20px);
                text-shadow: 0 0 30px #1f05b4;
                font-size: 100px;
              }
              >span {
                color: #FFFFFF;
                transform: translateZ(20px);
                text-shadow: 0 0 10px #1f05b4;
                position: absolute;
                padding: 0 25px;
                bottom: 20px;
              }
              &.right, &.left {
                top: 0;
                width: 60px;
                backface-visibility: hidden;
              }
              &.left {
                left: 0;
                border-left-width: 5px;
                transform: translate3d(1px, 0, -60px) rotateY(-90deg);
                transform-origin: 0%;
              }
              &.right {
                right: 0;
                border-right-width: 5px;
                transform: translate3d(-1px, 0, -60px) rotateY(90deg);
                transform-origin: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>
